<template>
	<div class="game-container report-container">
		<div class="params">
			<el-form
				ref="form"
				:inline="true"
				:model="queryData"
				label-width="auto"
				class="flex-warp-container"
			>
				<el-form-item
					:label="`${$t('common.choose_merchant')}:`"
					class="flex-row-container"
					label-width="77px"
				>
					<merchant-select
						v-model="queryData.merchantId"
						:placeholder="$t('common.please_choose')"
					></merchant-select>
				</el-form-item>
				<el-form-item style="margin-left: 8px">
					<el-button
						type="primary"
						icon="el-icon-search"
						:disabled="loading"
						size="medium"
						@click="search"
					>
						{{ $t('common.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						:disabled="loading"
						size="medium"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="view-container dealer-container mt30">
			<el-form
				ref="dialogFormRef"
				:model="formData"
				:rules="editFormRules"
				label-width="auto"
			>
				<el-row class="flex-row-container">
					<el-form-item
						:label="
							`${$t(
								'funds.deposit_and_withdraw_config.daily_count'
							)}:`
						"
						prop="dailyCount"
					>
						<el-input
							v-model="formData.dailyCount"
							:placeholder="$t('common.please_enter')"
							maxlength="5"
							v-input="{ name: 'num' }"
							:style="`width: ${getWidth('190px', 1.5)}`"
						></el-input>
					</el-form-item>
					<el-form-item
						:label="
							`${$t(
								'funds.deposit_and_withdraw_config.daily_amount'
							)}:`
						"
						prop="dailyAmount"
						style="margin-left: 30px;"
					>
						<el-input
							v-model="formData.dailyAmount"
							:placeholder="
								$t(
									'funds.deposit_and_withdraw_config.input_tip_9'
								)
							"
							maxlength="10"
							v-input="{ name: 'num' }"
							:style="`width: ${getWidth('190px', 1.5)}`"
						></el-input>
					</el-form-item>
				</el-row>
				<el-divider></el-divider>
				<div class="flex-warp-container">
					<div class="itemStyle">
						<i style="color:#F56C6C">*</i>
						<span class="noWarpStyle">
							{{
								$t(
									'funds.deposit_and_withdraw_config.virtual_currency_withdrawal_money'
								)
							}}:
						</span>
					</div>
					<el-form-item
						:label="
							`${$t(
								'funds.deposit_and_withdraw_config.trc2_agreement'
							)}`
						"
						prop="trcVirtualFee"
						id="formItem1"
					>
						<el-input
							v-model="formData.trcVirtualFee"
							:placeholder="
								$t(
									'funds.deposit_and_withdraw_config.input_tip_9'
								)
							"
							maxlength="5"
							v-input="{ name: 'num' }"
							:style="
								`width: ${getWidth('190px', 1.5)}`
							"
						></el-input>
					</el-form-item>
					<el-form-item
						:label="
							`${$t(
								'funds.deposit_and_withdraw_config.bank_card_withdrawal_money'
							)}:`
						"
						prop="bankCardFee"
						class="ml45"
					>
						<el-input
							v-model="formData.bankCardFee"
							:placeholder="
								$t(
									'funds.deposit_and_withdraw_config.input_tip_9'
								)
							"
							maxlength="5"
							v-input="{ name: 'num' }"
							:style="`width: ${getWidth('190px', 1.5)}`"
						></el-input>
					</el-form-item>
					<el-form-item
						:label="
							`${$t(
								'funds.deposit_and_withdraw_config.yh_withdrawal_hand_money'
							)}:`
						"
						prop="yhFee"
						class="ml45"
					>
						<el-input
							v-model="formData.yhFee"
							:placeholder="
								$t(
									'funds.deposit_and_withdraw_config.input_tip_9'
								)
							"
							maxlength="5"
							v-input="{ name: 'num' }"
							:style="`width: ${getWidth('190px', 1.5)}`"
						></el-input>
					</el-form-item>
				</div>
				<div class="flex-warp-container">
					<el-form-item
						:label="
							`${$t(
								'funds.deposit_and_withdraw_config.erc2_agreement'
							)}`
						"
						prop="ercVirtualFee"
						id="formItem2"
						class="ml126"
					>
						<el-input
							v-model="formData.ercVirtualFee"
							:placeholder="
								$t(
									'funds.deposit_and_withdraw_config.input_tip_9'
								)
							"
							maxlength="5"
							v-input="{ name: 'num' }"
							:style="
								`width: ${getWidth('190px', 1.5)}`
							"
						></el-input>
					</el-form-item>
					<el-form-item
						:label="
							`${$t(
								'funds.deposit_and_withdraw_config.bmh_withdrawal_hand_money'
							)}:`
						"
						prop="bmhFee"
						class="ml45"
					>
						<el-input
							v-model="formData.bmhFee"
							:placeholder="
								$t(
									'funds.deposit_and_withdraw_config.input_tip_9'
								)
							"
							maxlength="5"
							v-input="{ name: 'num' }"
							:style="`width: ${getWidth('190px', 1.5)}`"
						></el-input>
					</el-form-item>
				</div>
				<el-divider></el-divider>
				<el-form-item
					:label="
						`${$t('funds.deposit_and_withdraw_config.big_amount')}:`
					"
					prop="bigAmount"
				>
					<el-input
						v-model="formData.bigAmount"
						:placeholder="
							$t('funds.deposit_and_withdraw_config.input_tip_9')
						"
						maxlength="45"
						v-input="{ name: 'num' }"
						style="width: 395px"
					></el-input>
				</el-form-item>
				<el-divider></el-divider>
				<el-form-item>
					<el-button
						v-if="hasPermission('403061')"
						type="primary"
						:disabled="disabledBtn"
						@click="handleSubmit"
						style="width: 200px;"
						class="mt20"
					>
						{{ $t('common.save') }}
					</el-button>
				</el-form-item>
			</el-form>
		</div>
		<el-divider></el-divider>
		<div class="view-container dealer-container">
			<div class="content">
				<el-table
					v-loading="loading"
					element-loading-spinner="el-icon-loading"
					border
					size="mini"
					class="small-size-table"
					:data="dataList"
					style="width: 100%"
					:header-cell-style="getRowClass"
				>
					<el-table-column
						prop="operator"
						align="center"
						:label="$t('common.last_updateBy')"
					>
						<template slot-scope="scope">
							{{ scope.row.operator || '-' }}
						</template>
					</el-table-column>
					<el-table-column
						prop="updatedAt"
						align="center"
						:label="$t('common.last_updateAt')"
					>
						<template slot-scope="scope">
							{{ scope.row.updatedAt || '-' }}
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
		<GoogleKeyInput
			:isShowdialog="isShowdialog"
			@getGoogleKey="getGoogleKey($event)"
			@backPrevStep="backPrevStep()"
		></GoogleKeyInput>
	</div>
</template>

<script>
import list from '@/mixins/list'
import { routerNames } from '@/utils/consts'
import { Message } from 'element-ui'
export default {
	name: routerNames.agentWithdrawConfig,
	components: {
		GoogleKeyInput: () => import('@/components/GoogleKeyInput')
	},
	mixins: [list],
	data() {
		this.loadData = this.throttle(this.loadData, 1000)
		return {
			queryData: {
				merchantId: null
			},
			formData: {},
			dataList: [],
			disabledBtn: false,
			isShowdialog: false,
			editFormRules: {
				dailyCount: [
					{
						required: true,
						message: this.$t(
							'funds.deposit_and_withdraw_config.input_tip_warning_text1'
						),
						trigger: 'change'
					}
				],
				dailyAmount: [
					{
						required: true,
						message: this.$t(
							'funds.deposit_and_withdraw_config.input_tip_warning_text2'
						),
						trigger: 'change'
					}
				],
				bankCardWithdraw: [
					{
						required: true,
						message: this.$t(
							'funds.deposit_and_withdraw_config.input_tip_warning_text7'
						),
						trigger: 'change'
					}
				],
				bigAmount: [
					{
						required: true,
						message: this.$t(
							'funds.deposit_and_withdraw_config.input_tip_warning_text8'
						),
						trigger: 'change'
					}
				],
				trcVirtualFee: [
					{
						required: true,
						message: '请输入TRC20协议',
						trigger: 'change'
					}
				],
				ercVirtualFee: [
					{
						required: true,
						message: '请输入ERC20协议',
						trigger: 'change'
					}
				],
				bankCardFee: [
					{
						required: true,
						message: '请输入银行卡提现手续费',
						trigger: 'change'
					}
				],
				bmhFee: [
					{
						required: true,
						message: '请输入白马会提现手续费',
						trigger: 'change'
					}
				],
				yhFee: [
					{
						required: true,
						message: '请输入易换提现手续费',
						trigger: 'change'
					}
				]
			}
		}
	},
	computed: {},
	mounted() {
		this.queryData.merchantId = this.$store.getters.userInfo.merchantId
		if (this.queryData.merchantId === '0') {
			this.queryData.merchantId = null
		} else {
			this.loadData()
		}
	},
	methods: {
		loadData() {
			if (!this.queryData.merchantId) {
				this.dataList = []
				return
			}
			this.loading = true
			const params = {
				userType: 1,
				...this.queryData
			}
			this.$api
				.getPaymentChannelConfigWithdraw(params)
				.then((res) => {
					this.loading = false
					const {
						code,
						data: { record, totalRecord },
						msg
					} = res
					if (code === 200) {
						this.dataList = record || []
						this.total = totalRecord || 0
						// 获取最后一条记录
						let formDetail = {}
						if (this.dataList.length > 0) {
							formDetail = this.dataList[this.dataList.length - 1]
						}
						if (formDetail) {
							this.formData = {
								id: formDetail.id,
								merchantId: formDetail.merchantId,
								dailyCount: formDetail.dailyCount,
								dailyAmount: formDetail.dailyAmount,
								trcVirtualFee: formDetail.trcVirtualFee,
								ercVirtualFee: formDetail.ercVirtualFee,
								bankCardFee: formDetail.bankCardFee,
								bmhFee: formDetail.bmhFee,
								yhFee: formDetail.yhFee,
								bigAmount: formDetail.bigAmount
							}
						}
					} else {
						this.loading = false
						this.$message({
							message: msg,
							type: 'error'
						})
					}
				})
				.catch(() => {
					this.loading = false
				})
		},
		search() {
			this.loadData()
		},
		validateField(keys) {
			this.$refs.dialogFormRef.validateField(keys, () => {})
		},
		reset() {
			this.queryData = {
				merchantId:
					this.$store.getters.userInfo.merchantId === '0'
						? null
						: this.$store.getters.userInfo.merchantId
			}
			this.$refs.dialogFormRef.clearValidate()
			this.$refs.dialogFormRef.resetFields()
			this.loadData()
		},
		handleSubmit() {
			this.$refs.dialogFormRef.validate((valid) => {
				if (valid) {
					if (!this.formData.id) {
						Message({
							message: '请先查询相关商户信息',
							type: 'warning'
						})
						return
					} else if (
						!this.formData.trcVirtualFee &&
						this.formData.trcVirtualFee !== 0
					) {
						Message({
							message: this.$t(
								'funds.deposit_and_withdraw_config.input_tip_warning_text5'
							),
							type: 'warning'
						})
						return
					} else if (
						!this.formData.ercVirtualFee &&
						this.formData.ercVirtualFee !== 0
					) {
						Message({
							message: this.$t(
								'funds.deposit_and_withdraw_config.input_tip_warning_text6'
							),
							type: 'warning'
						})
						return
					} else {
						this.isShowdialog = true
					}
				}
			})
		},
		backPrevStep() {
			this.disabledBtn = false
			this.isShowdialog = false
		},
		getGoogleKey(data) {
			this.formData.googleVerifyCode = data
			this.formData.userType = 1
			this.isShowdialog = false
			const loading = this.$loading({
				lock: true,
				text: 'Loading',
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.7)'
			})
			const params = {
				...this.formData
			}
			this.disabledBtn = true
			this.$api
				.updateConfigWithdraw(params)
				.then((res) => {
					if (res.code === 200) {
						Message({
							message: '保存成功',
							type: 'success'
						})
						this.loadData()
					}
					this.disabledBtn = false
					loading.close()
				})
				.catch(() => {
					this.disabledBtn = false
					loading.close()
				})
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
	text-align: center;
	color: #909399;
	font-weight: 700;
}
.itemStyle {
	color: #606266;
	font-size: 14px;
	font-weight: 700;
	padding-top: 12px;
}
::v-deep .caret-wrapper {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
.data-refresh {
	margin-top: 0;
	padding-bottom: 20px;
}
.look {
	//background-color: #00BFBF;
	//border-color: #00BFBF;
	color: #00bfbf;
}
</style>
